<template>
  <div class="contract-content">
    <div class="inventory-box">
      <!-- 清单 -->
      <div class="module-box">
        <div class="box-head">
          <div class="bg-title">
            <div style="padding-left: 29px; margin-top: -5px">需求清单</div>
          </div>
          <div class="img-box">
            <img v-for="item in imgList" :key="item.id" :src="item" alt="" />
          </div>
        </div>
        <div class="tab-box">
          <div
            v-for="(item, index) in tabList"
            :key="item.id"
            :class="{ 'tab-active': tabActiveValue === index }"
            class="tab-li"
          >
            {{ item.name }}
          </div>
        </div>
        <div class="title-name">
          <div class="title-left">
            <span class="name">{{ demandData.name }}</span>
            <div class="btns">{{ demandData.tieleType }}</div>
          </div>
          <div>
            <span class="look-more">查看更多</span>
            <img src="@/assets/right_img.png" class="look-img" alt="" />
          </div>
        </div>
        <div class="line"></div>
        <div class="select-box select-box-width">
          <div class="select-li">
            <span class="screen-name">共享业务类型：</span>
            <el-select
              v-model="demandData.businessValue"
              placeholder="请选择进度"
              style="width: 130px"
            >
              <el-option
                v-for="item in businessOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="select-li mgl20">
            <span class="screen-name">任务类型：</span>
            <el-select
              v-model="demandData.taskValue"
              placeholder="请选择环节"
              style="width: 90px"
            >
              <el-option
                v-for="item in taskOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="select-btn mgl16">导入</div>
          <div class="select-btn">导入</div>
          <div class="select-btn">地图</div>
        </div>
        <div class="demand-table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column
              label="市县区"
              :show-overflow-tooltip="true"
              width="50"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.city }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="所属区域"
              :show-overflow-tooltip="true"
              width="60"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.region }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="线路名称"
              :show-overflow-tooltip="true"
              width="70"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.lineName }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="所属分支"
              :show-overflow-tooltip="true"
              width="70"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.branch }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="电压等级"
              :show-overflow-tooltip="true"
              width="70"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.grade }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="搭挂杆塔数量（基）"
              :show-overflow-tooltip="true"
              width="90"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.towerNum }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="杆塔（公里）"
              :show-overflow-tooltip="true"
              width="55"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.towerkilometre }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="光缆数量（条）"
              :show-overflow-tooltip="true"
              width="70"
            >
              <template slot-scope="scope">
                <span>{{ scope.row.towerStripNum }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="tips tips-pad tips-top">
          {{ demandData.tips }}
        </div>
      </div>
      <!-- 合同管理 -->
      <div class="module-box contract-box">
        <div class="box-head">
          <div class="bg-title">
            <div style="padding-left: 29px; margin-top: -5px">合同管理</div>
          </div>
          <div class="img-box">
            <img v-for="item in imgList" :key="item.id" :src="item" alt="" />
          </div>
        </div>
        <div class="title-name title-padding">
          <div class="title-left">
            <span class="name">合同名称xxxxxx合同</span>
          </div>
          <div>
            <span class="look-more">查看更多</span>
            <img src="@/assets/right_img.png" class="look-img" alt="" />
          </div>
        </div>
        <div class="line lin-bottom"></div>
        <div class="select-box">
          <div class="select-li">
            <span class="screen-name">合作方(甲方)：</span>
            <el-select
              v-model="demandData.businessValue"
              placeholder="请选择进度"
              style="width: 130px"
            >
              <el-option
                v-for="item in businessOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="select-li mgl20">
            <span class="screen-name">是否执行完毕：</span>
            <el-select
              v-model="demandData.taskValue"
              placeholder="请选择环节"
              style="width: 90px"
            >
              <el-option
                v-for="item in taskOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
          <div class="select-li mgl9">
            <span class="screen-name">是否到期：</span>
            <el-select
              v-model="demandData.taskValue"
              placeholder="请选择环节"
              style="width: 90px"
            >
              <el-option
                v-for="item in taskOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="tips tips-top">
          汇总数据：搭挂杆塔数量共计NN基，杆程共计NN公里，光缆数量共计NN条，皮长共计NN公里，总金额共计
          NNNNNNN元，租赁期间共计N年222。
        </div>
        <div class="echrtas">
          <chart-bar
            :data="chartData"
            :x-axis-data="xAxisData"
            :legend-data="legendData"
            :width="'600px'"
            :height="'230px'"
            text="柱状图"
          />
        </div>
      </div>
    </div>
    <!-- 预警内容 -->
    <journalBox />
  </div>
</template>
<script>
import ChartBar from "@/components/echarts/bar"; //柱状图
import journalBox from "./journalBox.vue";
export default {
  name: "contractContent",
  components: { ChartBar, journalBox },
  data() {
    return {
      tableData: [
        {
          city: "山东",
          lineName: "线路名称",
          grade: "电压等级",
          region: "所属区域",
          branch: "所属分支",
          towerNum: "搭挂杆塔数量（基）",
          towerkilometre: "杆塔（公里）",
          towerStripNum: "光缆数量（条）",
        },
        {
          city: "山东",
          lineName: "线路名称",
          grade: "电压等级",
          region: "所属区域",
          branch: "所属分支",
          towerNum: "搭挂杆塔数量（基）",
          towerkilometre: "杆塔（公里）",
          towerStripNum: "光缆数量（条）",
        },
      ],
      chartData: [
        [120, 200, 150, 80, 70],
        [100, 180, 130, 90, 60],
      ],
      xAxisData: ["A", "B", "C", "D", "E"],
      legendData: ["实际开票金额（扣除冲销额）", "实际收款金额"],
      taskOptions: [
        { value: "1", label: "黄金糕" },
        { value: "2", label: "双奶" },
      ],
      businessOptions: [
        { value: "1", label: "黄金糕" },
        { value: "2", label: "双奶" },
      ],
      demandData: {
        name: "客户名称+共享业务类别+提报时间",
        tieleType: "自定义业务标题",
        businessValue: 1, // 业务类型值
        taskValue: 1, // 业务类型值
        tips: "汇总数据：搭挂杆塔数量共计NN基，杆程共计NN公里，光缆数量共计NN条，皮长共计NN公里，总金额共计NNNNNNN元，租赁期间共计N年。",
      },
      imgList: [
        require("@/assets/icon_rome.png"),
        require("@/assets/icon_big.png"),
        require("@/assets/icon_open.png"),
        require("@/assets/icon_close.png"),
      ],
      tabActiveValue: 0,
      tabList: [
        { name: "共享业务1" },
        { name: "共享业务2" },
        { name: "共享业务3" },
      ],
    };
  },
  methods: {},
  mounted() {},
};
</script>
<style lang="less" scoped>
@import "./index.less";
</style>
